<template>
  <div>
    <el-row>
      <el-card class="box-card">
        <el-row>
          <el-col :span="5">
            <span class="habbit">近日兴趣：</span>
          </el-col>
          <el-col :span="19">
            <el-row class="buttonList">
              <el-col :span="6">
                <el-tooltip content="Top center" placement="top">
                  <el-button circle type="primary">Java</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  content="Bottom center"
                  placement="bottom"
                  effect="light"
                  class="bottomBut"
                >
                  <el-button circle type="success">HTML</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip content="Top center" placement="top">
                  <el-button circle type="info">Spring</el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  content="Bottom center"
                  placement="bottom"
                  effect="light"
                  class="bottomBut"
                >
                  <el-button circle type="danger">Mybatis</el-button>
                </el-tooltip>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <el-row>
          <el-col :span="5">
            <span class="data">近日数据：</span>
          </el-col>
          <el-col :span="3" :offset="16">
            <el-link class="checkAll">查看全部<i class="el-icon-arrow-right"></i> </el-link>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-card class="box-card-data">
            
            </el-card>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-card class="box-card-data">
            
            </el-card>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-card class="box-card-data">
            
            </el-card>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-card class="box-card-data">
            
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
import CreateCentreHeader from "@/components/CreateCentreHeader.vue";

export default {
  data() {
    return {};
  },
  methods: {},
  components: {
    Nav,
    CreateCentreHeader,
  },
  
};
</script>

<style scoped>
.el-row {
  text-align: left;
}
.habbit {
  font-family: KaiTi;
  font-size: 30px;
  line-height: 100px;
}
.bottomBut{
  margin-top: 50px;
}
.buttonList{
  height: 100%;
}
.data{
  font-family: KaiTi;
  font-size: 30px;
}
.checkAll {
  margin-top: 7px;
}
.box-card-data {
  background-color:gainsboro;
}
</style>